<!--
 * @Author: ningjz
 * @Date: 2022-04-11 18:05:46
 * @Description: 价格产销库存
-->
<template>
  <com-box :title="data.title">
    <template v-slot>
      <loading v-show="data.loading" />
      <div class="nav">
        <div class="box-bar echart-item">
          <div class="jgdb-unit">{{ data.unit }}</div>
          <!-- <charts class="line-chart" :params="data.params"></charts> -->
          <div ref="chart" style="width: 100%; height: 310px"></div>
        </div>
      </div>
    </template>
  </com-box>
</template>
<script lang="ts" setup>
import comBox from '@/components/comBox/comBox2.vue'
import loading from '@/charts/loading.vue'
import { reactive, onMounted, ref, defineEmits, defineProps } from 'vue'
import httpRequest from '@/service'
import * as echarts from 'echarts'
const emits = defineEmits(['change'])
const props = defineProps({
  date: String
})
const chart: any = ref(null)
let myChart: any
const data: any = reactive({
  visible: false,
  title: '',
  unit: '',
  loading: false
})
const getData = () => {
  const dom = chart.value
  if (dom) {
    if (myChart !== null && myChart !== '' && myChart !== undefined) {
      myChart.dispose()
    }
    myChart = echarts.init(dom)
  }
  let option = {
    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        snap: true
      },
      confine: true,
      backgroundColor: '#1959a7',
      borderColor: '#4beeff',
      borderWidth: 1,
      padding: 12,
      textStyle: {
        color: '#fff',
        fontSize: 14
      }
    },
    title: {
      show: true,
      text: '',
      left: '20',
      top: '10',
      right: '20',
      textStyle: {
        fontSize: 18,
        fontFamily: 'Microsoft YaHei',
        color: 'rgba(162, 199, 255,1)'
      }
    },
    legend: {
      show: true,
      right: 0,
      top: 0,
      itemWidth: 15,
      width: '70%',
      data: [],
      textStyle: {
        color: '#fff',
        fontSize: 12
      }
    },
    grid: {
      containLabel: true,
      top: 50,
      right: 10,
      bottom: 6,
      left: 10
    },
    xAxis: [
      {
        type: 'category',
        data: [],
        show: true,
        axisLabel: {
          fontSize: 15,
          color: '#fff'
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(126,206,244,0.3)'
          }
        },
        axisTick: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '用电量',
        position: 'left',
        nameTextStyle: {
          align: 'left',
          fontSize: 14,
          fontWeight: 'bold',
          color: 'transparent'
        },
        axisLabel: {
          fontSize: 14,
          color: '#fff'
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(126,206,244,0.1)'
          }
        }
      },
      {
        type: 'value',
        name: '比上年',
        show: true,
        nameTextStyle: {
          align: 'left',
          fontSize: 14,
          fontWeight: 'bold',
          color: 'transparent'
        },
        axisLabel: {
          fontSize: 14,
          color: '#fff',
          formatter: '{value}%'
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(126,206,244,0.1)'
          }
        }
      }
    ],
    series: [
      {
        name: '比上年',
        type: 'line',
        yAxisIndex: 1,
        data: [],
        datasetIndex: 0,
        label: {
          show: true,
          textStyle: {
            //数值样式
            fontSize: 16,
            color: 'rgb(248, 181, 81)'
          },
          formatter: '{c}%',
          position: 'top'
        },
        itemStyle: {
          color: 'rgb(248, 181, 81)'
        },
        symbolSize: 10,
        areaStyle: {
          opacity: 0
        }
      },
      {
        name: '用电量',
        type: 'bar',
        barWidth: '35%',
        yAxisIndex: 0,
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(23, 69, 141, 0.5)'
        },
        data: [],
        label: {
          show: true,
          textStyle: {
            //数值样式
            fontSize: 16,
            color: 'rgb(1, 251, 244)'
          },
          position: 'top'
        },
        itemStyle: {
          color: {
            type: 'linear',
            x: 0, //右
            y: 0, //下
            x2: 0, //左
            y2: 1, //上
            colorStops: [
              {
                offset: 0,
                color: 'rgba(2, 241, 180, 1)' // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: 'rgba(2, 241, 180, 0.5)' // 70% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(2, 241, 180, 0)' // 100% 处的颜色
              }
            ]
          }
        },
        areaStyle: {
          opacity: 0
        }
      }
    ]
  }
  data.loading = true
  httpRequest
    .get({ url: 'M2QSHYDL', params: { year: props.date } })
    .then((res) => {
      if (res.code == 200 && Object.keys(res.map).length > 0) {
        option.legend.data = Object.values(res.map)
        option.series[1].data = res.data.map((i: any) => {
          return i.value2
        })
        option.series[0].data = res.data.map((i: any) => {
          return i.value1.replace('%', '')
        })
        option.xAxis[0].data = res.data.map((i: any) => {
          return i.name
        })
        data.title = res.title
        data.unit = res.unit
        myChart.setOption(option)
        data.loading = false
      }
    })
    .catch(() => {
      console.log('请求失败')
    })
}

onMounted(() => {
  getData()
})
const refreshData = () => {
  getData()
}
defineExpose({
  refreshData
})
</script>
<style lang="less" scoped>
.nav {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 5px;
  // background-color: rgba(33, 122, 255, 0.1);
  .echart-item {
    width: 100%;
  }
  .box-bar {
    height: 100%;
    padding: 7px 30px 7px 15px;
    position: relative;
    .jgdb-unit {
      position: absolute;
      font-size: 18px;
      color: rgb(70, 237, 232);
      top: 0;
      left: 7px;
    }
    .jgdb-img {
      position: absolute;
      top: -20px;
      left: 7px;
    }
  }
  ::v-deep(.com-box .slot-box) {
    height: calc(100% - 55px);
  }
}
</style>
